This PR is for testing the feasibility of using central-host plugin's UI files (preview.js, preview.css) on GitHub Pages (https://github.com/FentPams/FentPams.github.io). The goal is to see if we can effectively host and display these files through GitHub Pages and use this as a reference for future implementations on admin.aem.live.

preivew.js and preivew.css files on Github pages:

• https://fentpams.github.io/lab/preview.js
• https://fentpams.github.io/lab/preview.css

Code changes:

• index.js, passing the context needed for preview.js, and import the url that points to the remote preview.js:

export async function loadLazy(document, options = {}) {
  const pluginOptions = { ...DEFAULT_OPTIONS, ...options };
  // do not show the experimentation pill on prod domains
  if (!isDebugEnabled) {
    return;
  }
  // eslint-disable-next-line import/no-cycle
  const preview = await import('https://fentpams.github.io/lab/preview.js');
  const context = {
    getMetadata,
    toClassName,
    debug,
  };
  preview.default.call(context, document, pluginOptions);
}

Screenshots of changing overlay pill's color in preview.css

Test URLs:

• Before: https://main--wknd--hlxsites.hlx.page/
• After: https://central-host--wknd--hlxsites.hlx.page/